<template>
  <div class="mian-box">
    <e-el-tree @eSaveNodes="onSaveNodes" v-bind="state" />
    <div class="table-box">
      <div class="head-search">
        <el-form
          ref="ruleFormRef"
          :model="formInline"
          label-width="auto"
          class="demo-ruleForm"
          size="small"
          status-icon
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="名称">
                <el-input
                  v-model="formInline.name"
                  placeholder="清输入名称"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button
                type="primary"
                style="color: #fff"
                color="#20B1EB"
                @click="onSubmit"
                >搜索</el-button
              >
              <el-button @click="onShow('add')">添加</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <e-el-table></e-el-table>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="新增/编辑" width="600" draggable>
    <div>
      <el-form
        ref="ruleFormRef"
        :model="formInline"
        label-width="auto"
        class="demo-ruleForm"
        size="small"
        status-icon
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="编码">
              <el-input v-model="formInline.name" placeholder="清输入编码" clearable />
            </el-form-item>
          </el-col>
		  <el-col :span="12">
            <el-form-item label="名称">
              <el-input v-model="formInline.name" placeholder="清输入编码" clearable />
            </el-form-item>
          </el-col>
		  <el-col :span="12">
            <el-form-item label="简码">
              <el-input v-model="formInline.name" placeholder="清输入编码" clearable />
            </el-form-item>
          </el-col>
		  <el-col :span="12">
            <el-form-item label="位置">
              <el-input v-model="formInline.name" placeholder="清输入编码" clearable />
            </el-form-item>
          </el-col>
		  <el-col :span="12">
            <el-form-item label="上级">
              <el-select v-model="formInline.region" placeholder="请选择上级" clearable>
				<el-option label="Zone one" value="shanghai" />
				<el-option label="Zone two" value="beijing" />
			  </el-select>
            </el-form-item>
          </el-col>
		  <el-col :span="12">
            <el-form-item label="部门负责人">
              <el-input v-model="formInline.name" placeholder="清输入编码" clearable />
            </el-form-item>
          </el-col>
		  <el-col :span="12">
            <el-form-item label="环境类别">
              <el-select v-model="formInline.region" placeholder="请选择环境类别" clearable>
				<el-option label="Zone one" value="shanghai" />
				<el-option label="Zone two" value="beijing" />
			  </el-select>
            </el-form-item>
          </el-col>
		  <el-col :span="12">
            <el-form-item label="科室电话">
              <el-input v-model="formInline.name" placeholder="清输入编码" clearable />
            </el-form-item>
          </el-col>
		  <el-col :span="12">
            <el-form-item label="科别">
              <el-select v-model="formInline.region" placeholder="请选择科别" clearable>
				<el-option label="Ⅰ类" value="1" />
				<el-option label="Ⅱ类" value="2" />
				<el-option label="Ⅲ类" value="3" />
				<el-option label="Ⅳ类" value="4" />
			  </el-select>
            </el-form-item>
          </el-col>
		  <el-col :span="24">
            <el-form-item label="工作性质">
				<el-table :data="tableData" border size="small" @selection-change="handleSelectionChange" max-height='200'>
					<el-table-column type="selection" width="40" />
					<el-table-column label="工作性质" prop="name" width="95" />
					<el-table-column label="服务对象" prop="state" width="98" />
					<el-table-column label="说明" prop="city" >
						<template #default="props">
							<div class="explain">{{ props.row.city }}</div>
						</template>
					</el-table-column>
				</el-table>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">关闭</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
          style="color: #fff"
          color="#20B1EB"
          size="small"
          >确认</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>
 
<script setup lang="ts">
import { reactive } from "vue";
import eElTree from "./components/e-el-tree.vue";
import eElTable from "./components/e-el-table.vue";
const state = reactive({
  treeData: [
    {
      id: 1,
      label: "所有部门",
      disabled: true,
      children: [
        {
          id: 2,
          label: "住院部",
          disabled: null,

          children: [
            {
              id: 20,
              label: "三级 1-1-1",
            },
            {
              id: 21,
              label: "三级 1-1-2",
            },
          ],
        },
        {
          id: 3,
          label: "医技部门",
          disabled: null,

          children: [
            {
              id: 20,
              label: "三级 1-1-1",
            },
            {
              id: 21,
              label: "三级 1-1-2",
            },
          ],
        },
        {
          id: 4,
          label: "医务部门",
          disabled: null,

          children: [
            {
              id: 20,
              label: "三级 1-1-1",
            },
            {
              id: 21,
              label: "三级 1-1-2",
            },
          ],
        },
        {
          id: 5,
          label: "医技部门",
          disabled: null,

          children: [
            {
              id: 20,
              label: "三级 1-1-1",
            },
            {
              id: 21,
              label: "三级 1-1-2",
            },
          ],
        },
        {
          id: 6,
          label: "财务部门",
          disabled: null,

          children: [
            {
              id: 20,
              label: "三级 1-1-1",
            },
            {
              id: 21,
              label: "三级 1-1-2",
            },
          ],
        },
        {
          id: 7,
          label: "后勤部门",
          disabled: null,

          children: [
            {
              id: 20,
              label: "三级 1-1-1",
            },
            {
              id: 21,
              label: "三级 1-1-2",
            },
          ],
        },
        {
          id: 8,
          label: "行政部门",
          disabled: null,
            children: [
            {
              id: 20,
              label: "三级 1-1-1",
            },
            {
              id: 21,
              label: "三级 1-1-2",
            },
          ],
        },
        {
          id: 9,
          label: "信息管理部门",
          disabled: null,
          children: [
            {
              id: 20,
              label: "三级 1-1-1",
            },
            {
              id: 21,
              label: "三级 1-1-2",
            },
          ],
        },
        {
          id: 10,
          label: "门诊部",
          disabled: null,

          children: [
            {
              id: 20,
              label: "三级 1-1-1",
            },
            {
              id: 21,
              label: "三级 1-1-2",
            },
          ],
        },
      ],
    },
  ],
});
const tableData = [
	{
        name: '临床',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
    },
    {
        name: '治疗',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
    },
    {
        name: '护理',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
    },
	{
        name: '西药房',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
    },
    {
        name: '成药房',
        state: '住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
    },
    {
        name: '领药部门',
        state: '门诊/住院病人',
        city: '直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。',
    }
]
const formInline = reactive({
  name: "",
});
const dialogVisible = ref(false);
function onSaveNodes(data: Tree) {
  console.log(data);
}
const onSubmit = (e) => {};
const onShow = (state: string) => {
  console.log(state);
  dialogVisible.value = true;
};
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
</script>
 
<style lang='scss' scope>
.mian-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* background: #fff; */
  display: flex;
  .table-box {
    height: 100%;
    overflow-y: auto;
    margin-left: 15px;
    flex: 1;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
  }
}
.explain{
	max-height: 50px;
	overflow-y: auto;
}
</style>